<template>
  <div class="page luckdraw-recommend">
    <div class="luckdraw-recommend-container" v-if="recommendList.length > 0">
      <m-link v-for="(item, i) in recommendList" :key="i"
        :title="item.name" :icon="item.logo" isLargeHeight
        :addon="item.introduction" :isLast="(i + 1) === recommendList.length"
        @on-click="onRecommendItemClick(item)"></m-link>
    </div>
    <empty-tip v-if="showEmptyTip" title="暂无推荐"></empty-tip>
  </div>
</template>

<script>
import MLink from 'comp/m-link'
import EmptyTip from 'comp/empty-tip'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MLink,
    EmptyTip
  },
  data () {
    return {
      recommendList: [],
      showEmptyTip: false
    }
  },
  mounted () {
    this.resetData()
    this.getSponsorList()
  },
  methods: {
    /**
     * 获取赞助商列表，由于小程序关联数量限制，暂时不做分页
     */
    async getSponsorList () {
      const ret = await this.$store.dispatch('getSponsorList', {
        page: 1,
        rows: 20
      })
      this.recommendList = ret.list
      if (this.recommendList.length === 0) {
        this.showEmptyTip = true
      }
    },
    /**
     * 点击赞助商列表，跳转对应的小程序，后台要关联才能跳转
     */
    onRecommendItemClick (item) {
      if (item.appid && item.link) {
        wx.navigateToMiniProgram({
          appId: item.appid,
          path: item.link
        })
      } else {
        wx.showToast({
          title: '无效配置',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-recommend {
  &-container {
    padding-top: 20rpx;
  }
}
</style>
